
<template>
    <el-dialog append-to-body :close-on-click-modal="false" :visible="isShow" :title="title" class="searchTenantDialog" @close="closeDialog">

        <div class="searchContent">
            
            <!-- 搜索 -->
            <div class="search-input">
                <el-form label-position="left" label-width="100px" size="mini" onSubmit="return false">
                    <el-form-item :label="tenantName">
                        <el-input @keyup.enter.native="goSearch" placeholder="请输入内容" v-model="searchKey" class="input-with-select">
                            <el-button @click="goSearch"  slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 表格结果数据 -->
            <div class="searchTable disabledCheckbox">
                <el-table
                    ref="singleTable"
                    :height="260"
                    :data="tableData"
                    highlight-current-row
                    :row-class-name="setRowClassName"
                    header-row-class-name="header-row"
                    @current-change="handleCurrentChange"
                    @selection-change="handleSelectionChange"
                    @select="selectRowProduct"
                    style="width: 100%">

                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>

                    <!-- 渲染表头 -->
                    <el-table-column
                        v-for='col in tableHeadData'
                        :prop="col.title"
                        :label="col.text"
                        :key="col.title">
                        <!-- 自定义显示格式 -->
                        <template slot-scope="scope">
                            <div>
                                <span>{{ scope.row[col.title] }}</span>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            


        </div>

        <div slot="footer" class="dialog-footer">
            <button class="el-button el-button--primary" @click="submit">确 定</button>
            <button class="el-button el-button--info" @click="closeDialog">取 消</button>
        </div>

    </el-dialog>
</template>

<script>
export default {
    name:"search-dialog",
    components:{},
    props:{},
    data:() =>({
        title:"",
        isShow:false,
        tenantName:"",

        type:"",
        searchKey:"",
        tableHeadData:[
            // {
            //     title:"tenantName",
            //     text:"单位名称"
            // }
        ],
        tableData:[],
        currentRow:"", //选中的行数据
    }),
    mounted(){},
    methods:{

        // 组件入口
        open(data){
            this.isShow = true;
            // let configData = Object.assign({},data);
            let configData = JSON.parse(JSON.stringify(data));
            if(configData.tenant){
                this.type = "tenant";
                this.tenantName = "单位名称：";
                this.tableHeadData = [ //选择单位
                    {
                        title:"unitName",
                        text:"单位名称"
                    },{
                        title:"unitId",
                        text:"单位ID"
                    },{
                        title:"unitProductCode",
                        text:"单位产品编号"
                    }
                ];
            }else{
                this.type = false;
                this.tenantName = "产品名称：";
                this.tableHeadData = [ //选择产品
                    {
                        title:"productPackageName",
                        text:"产品名称"
                    },{
                        title:"productPackageCode",
                        text:"产品编号"
                    }
                ];
            }
            this.goSearch();
        },
        // 执行搜索
        goSearch(){
            
            if(this.type){ //搜索单位
                this.api.searchTenantByName({
                    unitName:this.searchKey
                },{loading:true}).then( res =>{
                    console.log(res);
                    // res.data = [
                    //     {
                    //         "id": "15867698331260001",
                    //         "unitProductCode": "15867698331260000",
                    //         "orgId": "123456",
                    //         "unitName": "0413新建单位",
                    //         "products": [
                    //             {
                    //                 "tenantProductCode": "15877176961570000",
                    //                 "tenantProductName": "sdsdds"
                    //             }
                    //         ]
                    //     }
                    // ]
                    let listData = res.data;
                    listData.forEach( item =>{
                        item.check = false;
                    });
                    this.tableData = listData;
                }).catch( err =>{
                    console.log(err);
                });
            }else{ //搜索产品
                this.api.searchProductPackages({
                    productName:this.searchKey
                }).then( res =>{
                    console.log(res);
                    // [
                    //     {
                    //         "productPackageId": "15877091191610000",
                    //         "productPackageCode": "15877091191610000",
                    //         "productLine": "A6",
                    //         "productPackageName": "test11",
                    //         "productPackageStatus": "1",
                    //         "productPackageCreateDate": "1587709337000"
                    //     }
                    // ]
                    let listData = res.data;
                    this.tableData = listData;
                }).catch( err =>{
                    console.log(err);
                });
            }
            
        },
        // 确定选中单位
        submit(){
            let data = {
                type:this.type,
                currentRow:this.currentRow,
                listData:this.tableData
            }
            // if(this.type=="tenant"){
                this.$emit("searchDialog_submit",data);
            // }
            
            this.closeDialog();
        },


        //表格样式处理
        // 单选
        selectRowProduct(selection, row) {
            if (!selection.length) { // 直接点击单选框
                this.$refs.singleTable.clearSelection();
                this.$refs.singleTable.toggleRowSelection(row);
                return;
            }
            this.$refs.singleTable.setCurrentRow(row); // 高亮选中行
        },
        // 选中变化
        handleSelectionChange(row) {
            //console.log(data)
        },
        // 在单选框的change事件中高亮选中行
        handleCurrentChange(row) {
            this.$refs.singleTable.clearSelection();
            this.$refs.singleTable.toggleRowSelection(row);
            this.currentRow = row;
        },
        //设置行class
        setRowClassName({row, column, rowIndex, columnIndex}){
            row.currentIndex = rowIndex; //手动给每个行设置一个索引
        },

        closeDialog(){
            this.searchKey = "";
            this.tableData =[];
            this.isShow = false;
        }
    }
}
</script>

<style lang="scss" scoped >

.search-input{
    .el-form-item__label{
        line-height: 30px;
    }
}
.searchTable{
    margin-top: 30px;
}
</style>

<style lang="scss">

.searchTable{
    .el-table__body, .el-table__footer, .el-table__header{
        font-size: 12px;
        .el-table__row td{
            padding: 5px;
        }
    }
    .el-table th, .el-table tr.header-row{
        height:37px;
        background-color: #F5F7FA!important;
        color:#324558;
        font-size:12px;
        padding:0;
        th.is-leaf{
            padding:0;
        }
    }
    .el-form--label-left .el-form-item__label{
        font-size: 12px;
    }
    .el-form-item__content{
        line-height: 30px;
    }
}
.disabledCheckbox{
    .el-table{
        .el-table__header-wrapper{
            .el-checkbox{
                display: none;
            }
        }
    }
}
</style>

